<template>
  <div class="home pbpage">
    <My-head>
      <van-search class="search" placeholder="搜索书籍/作者" @click="gotopage('search')" />
      <van-icon @click="gotopage('mine')" name="user-o" />
    </My-head>

    <!--vant插件 轮播图 -->
    <My-swipe></My-swipe>

    <!-- 分类 -->
    <div class="shadow-sm van-grid">
      <div class="van-grid-item" style="flex-basis: 25%">
        <div class="van-grid-item__content van-grid-item__content--center">
          <i class="van-icon van-grid-item__icon" style="font-size: 60px"
            ><img
              src="http://static.welan.com/mobile/2021-11-4/0820bfecd9f5af24dd1cd352635f8740.png"
              class="van-icon__image"
            /><!----></i
          ><span class="van-grid-item__text">教材</span>
        </div>
      </div>
      <div class="van-grid-item" style="flex-basis: 25%">
        <div class="van-grid-item__content van-grid-item__content--center">
          <i class="van-icon van-grid-item__icon" style="font-size: 60px"
            ><img
              src="http://static.welan.com/mobile/2021-11-17/a74d4ef4852a0c5408c55f52ca516a08.png"
              class="van-icon__image"
            /><!----></i
          ><span class="van-grid-item__text">小说</span>
        </div>
      </div>
      <div class="van-grid-item" style="flex-basis: 25%">
        <div class="van-grid-item__content van-grid-item__content--center">
          <i class="van-icon van-grid-item__icon" style="font-size: 60px"
            ><img
              src="http://static.welan.com/mobile/2021-11-4/025314f10596e266b7d3d2079832f877.png"
              class="van-icon__image"
            /><!----></i
          ><span class="van-grid-item__text">科学</span>
        </div>
      </div>
      <div class="van-grid-item" style="flex-basis: 25%">
        <div class="van-grid-item__content van-grid-item__content--center">
          <i class="van-icon van-grid-item__icon" style="font-size: 60px"
            ><img
              src="http://static.welan.com/mobile/2021-11-4/7a7f80ab6a5a5832cb6a971dbe70660e.png"
              class="van-icon__image"
            /><!----></i
          ><span class="van-grid-item__text">历史</span>
        </div>
      </div>
      <div class="van-grid-item" style="flex-basis: 25%">
        <div class="van-grid-item__content van-grid-item__content--center">
          <i class="van-icon van-grid-item__icon" style="font-size: 60px"
            ><img
              src="http://static.welan.com/mobile/2021-11-4/63056f05bd6cea0f4662c77e4243c313.png"
              class="van-icon__image"
            /><!----></i
          ><span class="van-grid-item__text">经济</span>
        </div>
      </div>
      <div class="van-grid-item" style="flex-basis: 25%">
        <div class="van-grid-item__content van-grid-item__content--center">
          <i class="van-icon van-grid-item__icon" style="font-size: 60px"
            ><img
              src="http://static.welan.com/mobile/2021-11-4/d42866b4b9f2a4a0e02546e0984a88a5.png"
              class="van-icon__image"
            /><!----></i
          ><span class="van-grid-item__text">英语</span>
        </div>
      </div>
      <div class="van-grid-item" style="flex-basis: 25%">
        <div class="van-grid-item__content van-grid-item__content--center">
          <i class="van-icon van-grid-item__icon" style="font-size: 60px"
            ><img
              src="http://static.welan.com/mobile/2021-11-17/2fe493ec64b979ede8544d45ee18c5e0.png"
              class="van-icon__image"
            /><!----></i
          ><span class="van-grid-item__text">科幻</span>
        </div>
      </div>
      <div class="van-grid-item" style="flex-basis: 25%">
        <div class="van-grid-item__content van-grid-item__content--center">
          <i class="van-icon van-grid-item__icon" style="font-size: 60px"
            ><img
              src="http://static.welan.com/mobile/2021-11-19/1fe2f8ba1b5c0c4308819f941f465e89.png"
              class="van-icon__image"
            /><!----></i
          ><span class="van-grid-item__text">童书</span>
        </div>
      </div>
    </div>

    <!-- 首页推荐列表 -->
    <div class="shou">
      <p class="home-title">{{ homeBookLtitle }}</p>
      <ul>
        <li v-for="(l, i) in homeBookLists" :key="i">
         <!-- <router-link :to="{ name: 'bookDetail', params: { skuId: l.skuId }, query: { name: l.name }, query: { img: l.img }, query: { wl_price: l.wl_price } }"> -->
           <router-link :to="{ name: 'bookDetail', params: { skuId: l.skuId }, query: { name: l.name } }">
            <div class="i-img">
              <img :src="l.img" alt="" />
            </div>
            <p class="li-name"> {{ l.name }} </p>
            <p class="li-price"> ￥{{ (l.wl_price).toFixed(2) }} </p>
         </router-link>
        </li>
      </ul>
    </div>

    <!-- 编辑推荐列表 -->
    <div class="bian shou">
      <p class="home-title">{{ editBookLtitle }}</p>
      <ul>
        <li v-for="(l, i) in editBookLists" :key="i">
          <router-link :to="{ name: 'bookDetail', params: { skuId: l.skuId }, query: { name: l.name } }">
            <div class="i-img">
              <img :src="l.img" alt="" />
            </div>
            <p class="li-name"> {{ l.name }} </p>
            <p class="li-price"> ￥{{ (l.wl_price).toFixed(2) }} </p>
          </router-link>
        </li>
      </ul>
    </div>

    <!-- 精品推荐图片-->
    <!-- <div class="jing-img">
      <img
        src="https://m.welan.com/static/img/jingpingtuijian.b54b9846.png"
        alt=""
      />
    </div> -->

    <!-- 精品推荐列表 -->
    <!-- <div class="pin-nav">
      <ul>
        <li v-for="(l, i) in recommendList" :key="i">
          <router-link :to="{ name: 'bookDetail', params: { skuId: l.skuId }, query: { name: l.name } }">
              <div class="ig">
              <img class="li-img" :src="l.img" alt="" />
            </div>
            <div class="li-all">
                <p class="li-name"> {{ l.name }} </p>
                <div class="li-bo">
                    <p class="li-price"> ￥{{ (l.wl_price).toFixed(2) }} </p>
                    <div class="li-cart">
                      <van-icon name="cart-o" />
                    </div>
                </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div> -->

    <Jing-list :recommendList="recommendList"></Jing-list>

    <!-- 结尾 -->
    <!-- <div>
      <p class="end">没有更多了</p>
    </div> -->


  </div>
</template>

<script>
export default {
  data() {
    return {
      // banners: [],
      homeBookLists: [],
      editBookLists: [],
      homeBookLtitle: "",
      editBookLtitle: "",
      // pageNum: 1,
      // recommendList: [],
    };
  },
  methods: {
    // getBanner() {
    //   this.$ajax.getWeiLanSwipe({}).then((res) => {
    //     this.banners = res;
    //   });
    // },
    getBookList() {
      this.$ajax.getWeiLanHome({}).then((res) => {
        this.homeBookLists = res[0].bookList;
        this.homeBookLtitle = res[0].title;
        this.editBookLists = res[1].bookList;
        this.editBookLtitle = res[1].title;
      });
    },
    // getRecommend() {
    //   this.$ajax
    //     .getRecommendList({
    //       pageNum: this.pageNum,
    //     })
    //     .then((res) => {
    //       this.recommendList = res.bookList;
    //     });
    // },
  },
  mounted() {
    this.getBookList()
    this.getRecommendListAction({
      pageNum: this.pageNum
    })
    // this.getRecommend()
  },
};
</script>

<style lang="scss">
.van-search {
  // padding-left: 0;
  padding: 0rem 0.32rem 0 0;
}

// .van-nav-bar__content {
//     height: 1.1rem;
// }

.van-nav-bar .van-icon-search {
  color: inherit;
  padding-right: 0.083333rem;
  font-size: inherit;
  font-weight: normal;
}

.van-nav-bar .van-icon-user-o {
  font-size: 6vw;
  font-weight: normal;
}

.van-nav-bar__left {
  padding: 0;
}

.van-search__content {
  display: inline-block;
  background-color: #eee;
  width: 85vw;
  margin-left: 2vw;
  border-radius: 26.667vw;
  height: 8vw;
}

.home {
  background-color: #f7f7f7;
  // .swipe {
  //   height: 29.333vw;
  //   .vimg {
  //     width: 100%;
  //     height: 100%;
  //   }
  // }

  .shadow-sm {
      display: flex;
      flex-wrap: wrap;
      .van-grid-item__content {
          padding: 0;
          .van-icon__image {
            // width: 2em;
            // height: 2em;
            object-fit: contain;
        }
      }
  }

  .shou {
      .home-title {
          text-align: center;
          line-height: 1;
          font-size: 20px;
          font-weight: bold;
          margin: 22px 0;
      }
      ul {
          display: flex;
          flex-wrap: wrap;
          background-color: white;
          li {
              width: 33.3333%;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 4.267vw 2.133vw;
              text-align: center;
              a {
                color: black;
                .i-img {
                  display: flex;
                  justify-content: center;
                  img {
                    width: 68px;
                    height: 80px;
                  }
                }
                .li-name {
                  margin-top: 10px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  text-align: center;
                  width: 115px;
                  font-size: 14px;
                }
                .li-price {
                    color: #f2270c;
                    font-size: 13px;
                }
              }
          }
      }
  }

  .jing-img {
      margin-top: 10px;
      img {
        width: 100%;
        height: 100%;
      }
  }

  // .pin-nav {
  //     ul {
  //         display: flex;
  //         flex-wrap: wrap;
  //         justify-content: space-around;
  //         li {
  //             background-color: white;
  //             width: calc(50% - 2vw);
  //             .ig {
  //               width: 185px;
  //               height: 186px;
  //               .li-img {
  //                 width: 100%;
  //                 height: 100%;
  //               }
  //             }
  //             .li-all {
  //                 padding: 2vw;
  //                 .li-name {
  //                     height: 8vw;
  //                     margin-bottom: 3.2vw;
  //                     font-size: 14px;
  //                     line-height: 15px;
  //                     display: -webkit-box;
  //                     -webkit-box-orient: vertical;
  //                     -webkit-line-clamp: 2;
  //                     overflow: hidden;
  //                     text-overflow: ellipsis;
  //                     color: black;
  //                 }
  //                 .li-bo {
  //                     display: flex;
  //                     justify-content: space-between;
  //                     .li-price {
  //                       color: #f2270c;
  //                       font-size: 13px;
  //                   }
  //                   .li-cart {
  //                     padding-right: 20px;
  //                     .van-icon-cart-o {
  //                         color: red;
  //                         font-size: 0.5rem;
  //                         border: 1px solid red;
  //                         padding: 0.533vw 0.533vw 0;
  //                         border-radius: 1.6vw;
  //                     }
  //                   }
  //                 }
  //             }
  //         }
  //     }
  // }

  .end {
    color: #969799;
    font-size: 3.733vw;
    line-height: 13.333vw;
    text-align: center;
  }

}
</style>